import { Button} from 'antd';
import React, { useRef } from 'react';
import { PageContainer} from '@ant-design/pro-layout';
import type {ActionType } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import type { UserTableListItem } from './data.d';
import { queryPageUserInfo} from './service';


 
const UserTableList: React.FC<{}> = () => {
 
  const actionRef = useRef<ActionType>();

  const columns = [
    {
      title: '用户名',
      dataIndex: 'name',
    },
    {
      title: '别名',
      dataIndex: 'title',
    },
    {
      title: '状态',
      dataIndex: 'status',
      valueEnum: {                
        0: {
          text: '禁用',
          status: 'Default',
        },
        1: {
          text: '启用',
          status: 'Processing',
        }
      },
    },
    {
      title: '创建时间',
      dataIndex: 'createDate',
      search: false, //设置是否作为搜索框
    },
    {
      title: '修改时间',
      dataIndex: 'updateDate',
      search: false,
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (_, record) => [
        <a  key="config"  onClick={() => { }}>删除</a>,
        <a  key="config"  onClick={() => { }}>详情</a>
        
      ],
    },
  ];

  return (
    <PageContainer>
      <ProTable<UserTableListItem>
        headerTitle = '用户信息'
        actionRef = {actionRef}
        rowKey = "id"
        search = {{
          labelWidth: 120,
        }}
        toolBarRender = {() => [
          <Button
            type="primary"
            key="primary"
            onClick={() => {
              
            }}
          > 新建
          </Button>,
        ]}
        pagination = {{
          pageSize: 10,
        }}
        request = {(params, sorter, filter) => queryPageUserInfo({ ...params, sorter, filter })}
        columns = {columns}
      />
    </PageContainer>
  );
};
 
export default UserTableList;